<template>
    <section class="write-diary">
        <div class="inner">
            <simple-title :title="'修改日记'" :show="false"></simple-title>
            <div class="content">
                <Form :model="formItem" :label-width="80">
                    <FormItem label="日记标题：">
                        <Input v-model="formItem.name" placeholder="新建日记请输入完整的标题，完善日记可点击右边的三角，在日记列表中选择"></Input>
                    </FormItem>
                    <FormItem label="记录时间：">
                        <Row>
                            <Col span="11">
                                <DatePicker type="date" placeholder="Select date" v-model="formItem.date" @on-change="handleChange" ></DatePicker>
                            </Col>
                            (术后第 <span class="pink">0</span> 天)
                        </Row>
                    </FormItem>
                    <FormItem label="手术医院：">
                        <Input v-model="formItem.hospital" placeholder="" style="width: 300px"></Input>
                    </FormItem>
                    <FormItem label="手术医生：" style="width: 500px" placeholder="可直接选择，如列表中找不到，可以直接输入">
                        <Input v-model="formItem.doctor" placeholder="" style="width: 300px"></Input>
                    </FormItem>
                    <FormItem label="预约价格：">
                        <Input v-model="formItem.yprice"  style="width: 200px" placeholder="输入价格..."></Input>
                    </FormItem>
                    <FormItem label="折扣：">
                        <Input v-model="formItem.sale" style="width: 200px" placeholder="折扣..."></Input>
                    </FormItem>
                    <FormItem label="医院价格：">
                        <Input v-model="formItem.yiprice" style="width: 200px" placeholder="医院价格..."></Input>
                    </FormItem>
                    <FormItem label="插入照片：">
                        <Upload style="display: inline-block"  :action="UploadUrl()" :on-success="one">
                            <img :src="images.one" alt="">
                        </Upload>
                        <Upload style="display: inline-block" :action="UploadUrl()" :on-success="two">
                            <img :src="images.two" alt="">
                        </Upload>
                        <Upload style="display: inline-block" :action="UploadUrl()" :on-success="tree">
                            <img :src="images.three" alt="">
                        </Upload>
                        <p>为了更好的展示日记的美观，写日记时，首次插入的照片为术前照片，后期插入的为每个恢复阶段的照片，这样才能起到前后对比的效果！</p>
                    </FormItem>
                    <FormItem label="正文：">
                        <div id="editorElem"></div>
                        <!--<Input v-model="formItem.content" type="textarea" :autosize="{minRows: 4}" placeholder="日记正文..."></Input>-->
                    </FormItem>
                    <FormItem label="购买项目：">
                        <Select v-model="formItem.pro" style="width:150px;margin-right: 5px" @on-change="selpro">
                            <Option v-for="item in proList" :value="item.id" :key="item.id" >{{ item.name }}</Option>
                        </Select>
                        <Select v-model="formItem.city" style="width:150px;margin-right: 5px" @on-change="selcity">
                            <Option v-for="item in cityList" :value="item.id" :key="item.id" >{{ item.name }}</Option>
                        </Select>
                        <Select v-model="formItem.dis" style="width:150px" @on-change="selc">
                            <Option v-for="item in disList" :value="item.id" :key="item.id" >{{ item.name }}</Option>
                        </Select>
                        <span @click="add" class="add">添加</span>
                        <Input v-model="text" style="width: 450px;margin-top: 5px" placeholder=""></Input>
                    </FormItem>
                    <FormItem label="术后症状：">
                        <p>术后症状的描述以利于正价用户对该项目的深入了解！</p>
                        <p><span class="pink">添加详细症状<Icon type="ios-arrow-down" /></span></p>
                        <div class="clearfix">
                            <span class="float-left">症状：</span>
                            <div class="selected-box float-left" style="width: 520px;margin-left: 20px">
              <span class="item"
                    :class="{active: i.check}"
                    v-for="i in list"
                    :key="i.id"
                    @click="i.check = !i.check">
                      {{i.name}}
              </span>
                            </div>
                        </div>
                        <div>
                            <p class="rate"><span>满意度：</span> <Rate  v-model="formItem.satisfied" icon="md-happy" /> <span>非常满意</span></p>
                            <p class="rate"><span>肿胀度：</span> <Rate  v-model="formItem.swelling" icon="ios-water" /> <span>完全不肿</span></p>
                            <p class="rate"><span>疼痛感：</span> <Rate  v-model="formItem.pain" icon="ios-pulse" /> <span>完全不疼</span></p>
                            <p class="rate"><span>疤痕度：</span> <Rate  v-model="formItem.scar" icon="ios-heart" /> <span>完全无痕</span></p>
                        </div>
                    </FormItem>
                    <FormItem label="日记返现：">
                        <Input v-model="formItem.diaryBack" style="width: 500px" placeholder="眼整形北京萌宠日系下至+微笑内眼角 日记返现500元！"></Input>
                        <span class="pink">&nbsp;&nbsp;&nbsp;商业用户专项</span>
                        <Checkbox label="" v-model="checked">勾选开启积分阅读权限，需要支付 20 积分才能阅读完整日记。</Checkbox>
                        <Checkbox label="" v-model="checked1">勾选关闭评论 关闭评论后，该日记只能阅读，评论功能将被隐藏。</Checkbox>
                        <Checkbox label="" v-model="checked2">勾选禁止转载 选择后改日记将被禁止转载</Checkbox>
                        同步至
                        <CheckboxGroup v-model="formItem.target">
                            <Checkbox label="新浪微博"></Checkbox>
                            <Checkbox label="微信朋友圈"></Checkbox>
                            <Checkbox label="QQ空间"></Checkbox>
                            <Checkbox label="我的圈子"></Checkbox>
                        </CheckboxGroup>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" style="width: 200px" @click="subimt">发布</Button>
                    </FormItem>
                </Form>
            </div>
        </div>
    </section>
</template>

<script>
    import E from 'wangeditor'
    import SimpleTitle from '../../../components/Title/SimpleTitle'
    export default {
        name: 'WriteDiary',
        components: {
            SimpleTitle
        },
        data () {
            return {
                formItem: {},
                list: [
                    {id:1, name: '轻微肿胀', check: false},
                    {id:2, name: '严重肿胀', check: false},
                    {id:3, name: '伤口疼痛', check: false},
                    {id:4, name: '伤口发红', check: false},
                    {id:5, name: '伤口发痒', check: false},
                    {id:6, name: '伤口青紫', check: false},
                    {id:7, name: '疤痕增生', check: false},
                    {id:8, name: '疤痕明显', check: false},
                    {id:9, name: '伤口渗血', check: false},
                    {id:10, name: '术区化脓', check: false}
                ],
                disList:[],
                proList:[],
                cityList:[],
                images:{
                    one:require('./img/front.png'),
                    two:require('./img/side45.png'),
                    three:require('./img/side.png')
                },
                imglist:'',
                pid:0,
                city:0,
                dis:0,
                por:0,
                idlist:'',
                text:'',
                checked:false,
                checked1:false,
                checked2:false,
                diary_id:'',
                id:"",
                editorContent:'',

            }
        },
        created () {
            this.adrass()
            this.getinfo()
        },
        methods: {
            getinfo () {
                this.id = this.$route.query.id
                console.log(this.id)
                let _this =this
                this.$post('/api/Diary/DiaryInfo',
                    {
                        diary_id:_this.id,
                    }, function (res) {
                        _this.formItem = res.data
                        _this.formItem.date=new Date(res.data.time*1000)
                        _this.formItem.isjifen = 1?_this.checked = true:_this.checked = false;
                        _this.formItem.isping = 1?_this.checked1 = true:_this.checked1 = false;
                        _this.formItem.ismoney2 = 1?_this.checked2 = true:_this.checked2 = false;
                        _this.text =  _this.formItem.projectgroup
                        _this.images.one = _this.$Url+ _this.formItem.images[0]
                        _this.images.two = _this.$Url+_this.formItem.images[1]
                        _this.images.three =_this.$Url+ _this.formItem.images[2]
                        _this.editorContent =res.data.content
                        var editor = new E('#editorElem')
                        editor.create()
                        editor.txt.html(_this.editorContent)
                    }, function (errcode, errmsg,err) {
                        console.log(err)
                        console.log(errmsg)
                    })

            },
            adrass () {
                let _this =this
                this.$post('/api/project/project_type',
                    {
                        pid:_this.pid,
                    }, function (res) {
                        _this.proList = res.data
                        console.log(typeof _this.proList[0].id)
                    }, function (errcode, errmsg,err) {
                        console.log(err)
                        console.log(errmsg)
                    })
            },
            diss () {
                let _this =this
                this.$post('/api/project/project_type',
                    {
                        pid:_this.dis,
                    }, function (res) {
                        _this.disList = res.data
                    }, function (errcode, errmsg,err) {
                        console.log(err)
                        console.log(errmsg)
                    })
            },
            citys () {
                let _this =this
                this.$post('/api/project/project_type',
                    {
                        pid:_this.city,
                    }, function (res) {
                        _this.cityList = res.data
                        console.log( _this.cityList)
                    }, function (errcode, errmsg,err) {
                        console.log(err)
                        console.log(errmsg)
                    })
            },
            handleChange (date) {
                let dateTime = new Date(date)
                this.formItem.time = dateTime.getTime()
                console.log( this.formItem.time)
            },
            UploadUrl(){
                return  this.$Url+'/api/common/upload';
            },
            one (res){
                this.images.one=this.$Url+res.data.url
                this.imglist = res.data.url
            },
            two (res){
                this.images.two=this.$Url+res.data.url
                this.imglist = this.imglist +','+ res.data.url
            },
            tree (res){
                this.images.three=this.$Url+res.data.url
                this.imglist = this.imglist +','+res.data.url
            },
            selpro (value) {
                this.city = value
                this.citys()
            },
            selcity (value) {
                this.dis = value
                this.diss()
            },
            selc (value){
                this.por = value
                if(this.idlist == ''){
                    this.idlist = value
                }else {
                    this.idlist =this.idlist+','+ value
                }
            },
            add () {
                let _this = this
                this.disList.forEach(function (i) {
                    if(_this.por == i.id){
                        _this.text = _this.text+i.name+','
                    }
                })
            },
            subimt () {
                this.formItem.isjifen = this.checked ? 1:2;
                this.formItem.isping = this.checked1 ? 1:2;
                this.formItem.ismoney2 = this.checked2 ? 1:2;
                let _this = this

                _this.$post('/api/Diary/addDiary',
                    {
                        token:_this.$token,
                        projectgroup_ids:_this.idlist,
                        time:_this.formItem.time,
                        name:_this.formItem.name,
                        hospital:_this.formItem.hospital,
                        doctor:_this.formItem.doctor,
                        yprice:_this.formItem.yprice,
                        yiprice:_this.formItem.yiprice,
                        sale:_this.formItem.sale,
                        images:_this.imglist,
                        content:_this.editorContent,
                        // symptom:1263,
                        satisfied:_this.formItem.satisfied,
                        swelling:_this.formItem.swelling,
                        pain:_this.formItem.pain,
                        scar:_this.formItem.scar,
                        isjifen:_this.formItem.isjifen,
                        isping:_this.formItem.isping,
                        iszhuan:_this.formItem.iszhuan,
                        diary_id:_this.id,
                    },function (res) {
                        _this.$message.success(res.msg);
                    },function (err,errmsg,errcode) {
                        _this.$message.error(errmsg);

                    }
                )

            }
        },
        mounted() {
            var editor = new E('#editorElem')
            editor.customConfig.onchange = (html) => {
                this.editorContent = html
            }
            editor.customConfig.uploadImgServer = this.$IUrl  // 上传图片到服务器
            editor.customConfig.uploadFileName = 'file';
            editor.customConfig.uploadImgHooks = {
                customInsert: function (insertImg, result, editor) {
                    var url = result.data[0]
                    insertImg(url)
                }
            }
            editor.create()

        }
    }
</script>

<style lang="less">
    @import "../../../style/style.less";
    .write-diary {
        border: 1px solid @border-color;
        padding: 15px !important;
        .add{
            background-color: @theme-color-dark;
            color: white;
            padding: 7px 15px;
            border-radius: 4px;
            margin-left: 5px;
            cursor: pointer;

        }
        .ivu-upload{
            margin-right: 10px;
            img{
                width: 90px;
                height: 90px;
            }
            .ivu-upload-list{
                display: none !important;
            }
        }
        .content {
            padding-top: 15px;
            .rate {
                span {
                    position: relative;
                    top: 3px;
                }
            }
            .selected-box {
                padding: 10px 0;
                .item {
                    color: @theme-color-dark;
                    background-color: @theme-color-light;
                    font-size: 14px;
                    height: 28px;
                    line-height: 28px;
                    display: inline-block;
                    margin: 0 8px 4px 0;
                    border-radius: 4px;
                    padding: 0 10px;
                    cursor: pointer;
                }
                .active {
                    background-color: @theme-color-dark;
                    color: #fff;
                }
            }
        }
    }
</style>
